<%-- 
    Document   : Formulario_Usuario
    Created on : 28/03/2012, 10:11:31 AM
    Author     : andrade
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Crear Usuario Normal - SAVE</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Fancy Sliding Form with jQuery" />
        <meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/sliding.form.js"></script>


        <script language="JavaScript">

            function habilita(){
                document.formElem.grado.disabled = false;
                document.formElem.grado.value = "";
            }

            function deshabilita(){
                document.formElem.grado.disabled = true;
                document.formElem.grado.value = "0";
            }
            
            function habilitado(){
            document.formElem.areawork.disabled = false;
            document.formElem.areawork.value = "";
            }

            function deshabilitado(){
             document.formElem.areawork.disabled = true;
             document.formElem.areawork.value = "No";
   }


        </script>   
        
       
        <script src="js_validar/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript" src="js_validar/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="js_validar/mktSignup.js"></script>
    </head>

    <body>

        <div id="content">
            <div >
                <img src="Imagenes/Banner20122.jpeg" width="698px" height="150px">
            </div>
            <div >
            </br>
               <h2>Formulario de Ingreso de Usuario</h2>
            </br>
            </div>
            <div id="wrapper">
                <div id="steps" >
                    <form id="formElem" name="formElem" action="Register_User" method="get">
                        <fieldset class="step">
                            <legend>Informaci&oacute;n Cuenta</legend>

                            <p style="margin-top:90px">
                            <label id="texto" for="identification">Identificaci&oacute;n</label>
                            <input id="identification" placeholder="CC - T.I" minlength="6" maxlength="12" type="text" class="required digits minlength" name="identification"  autocomplete="off"/>
                            </p>
                            <p>
                                <label id="texto" for="email">Email</label>
                                <input id="email" name="email" placeholder="info@correo.com" class="required email" type="email" AUTOCOMPLETE="OFF" />
                            </p>
                            <p>
                                <label id="texto" for="password">Contrase&ntilde;a</label>
                                <input id="password1" class="required  minlength"  minlength="6" maxlength="10"  name="password1"  type="password" value="" /> 
                            </p>
                            <p>
                                <label id="texto" for="password2">Vuelva a escribir la contrase&ntilde;a</label>
                                <input id="password2" class="required minlength" equalTo="#password1" minlength="6" maxlength="10" name="password2"   type="password"  value="" />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Informaci&oacute;n Usuario</legend>
                            <p style="margin-top:45px">
                                <label id="texto" for="name">Nombre</label>
                                <input id="name" placeholder="minombre" class="required" name="name" type="text" AUTOCOMPLETE="OFF" />
                            </p>
                            <p>
                                <label id="texto" for="surname">Apellido</label>
                                <input id="surname" placeholder="miapellido" class="required" name="surname" type="text" AUTOCOMPLETE="OFF" />
                            </p>
                            <p>
                                <label id="texto" for="telephone">Tel&eacute;fono o celular</label>
                                <input id="telephone" placeholder="Teléfono fijo comenzar con 000" class="required phone" name="telephone" type="tel"  AUTOCOMPLETE="OFF" />
                            </p>
                            <p>
                                <label id="texto" for="address">Direcci&oacute;n</label>
                                <input id="address" placeholder="calle 13 n 3-##" class="required" name="address" type="text" autocomplete="off"/>
                            </p>
                            <p>
                                <label id="texto" for="origin">Lugar de Origen</label>
                                <input id="origin"  placeholder="Roldanillo" class="required" name="origin" type="text" autocomplete="off"/>
                            </p>
                            <p>
                                <label id="texto"for="sex">Sexo</label>
                                <select id="sex" name="sex" class="required">
                                    <option value="">---------</option>
                                    <option>Masculino</option>
                                    <option>Femenino</option>
                                </select>
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>Informaci&oacute;n Academica</legend>
                            <p style="margin-top:30px">
                                <label id="texto" for="graduate">¿Es usted Graduado de </br>basica secundaria?</label>
                                <font face='Comic Sans MS,arial,verdana' size='2'>No</font>
                                <input type="radio"  name="graduate"  value="No" onclick="habilita()">&nbsp;&nbsp;
                                    <font face='Comic Sans MS,arial,verdana' size='2'>Si</font>
                                    <input type="radio" checked name="graduate" value="Si" onclick="deshabilita()"></br>
                                        </p>
                                        
                                        <p>
                                            <label id="texto" for="grado">Grado</label>
                                            <input id="grado" name="grado" value="0" disabled AUTOCOMPLETE="OFF" />
                                        </p>
                                        <p>
                                            <label id="texto" for="institution">Instituci&oacute;n Educativa </br> donde estudia o se graduo</label>
                                            <input id="institution" class="required" name="institution" type="text" AUTOCOMPLETE="OFF"  />
                                        </p>
                                        
                                        <p>
                                            <label id="texto" for="career">Carrera a la que aspira</label>
                                            <input id="career" name="career" AUTOCOMPLETE="OFF"  />
                                        </p>
                                        <p>
                                            <label id="texto" for="proof">Promedio general de ICFES</label>
                                            <input id="proof" class="required number" name="proof"  AUTOCOMPLETE="OFF"  />
                                        </p>
                                        </fieldset>
                                        <fieldset class="step">
                                            <legend>Informaci&oacute;n Familiares</legend>
                                            <p>
                                                <label id="texto" for="nameF">Nombre Familiar</label>
                                                <input id="nameF" class="required" name="nameF" type="text" AUTOCOMPLETE="OFF" />
                                            </p>
                                            <p>
                                                <label id="texto" for="surnameF">Apellido Familiar</label>
                                                <input id="surnameF" class="required" name="surnameF" type="text" AUTOCOMPLETE="OFF"  />
                                            </p>
                                            <p>
                                                <label id="texto" for="addressF">Direcci&oacute;n del Familiar</label>
                                                <input id="addressF" class="required" name="addressF" type="text" AUTOCOMPLETE="OFF" />
                                            </p>
                                            <p>
                                                <label id="texto" for="telephoneF">Tel&eacute;fono del Familiar </label>
                                                <input id="telephoneF" placeholder="si es teléfono comenzar con 000" class="required phone" name="telephone" type="text" AUTOCOMPLETE="OFF" />
                                            </p>
                                            <p>
                                                <label id="texto" for="studydad">Ultimo Nivel de formaci&oacute;n del padre</label>
                                                <select id="studydad" class="required" name="studydad">
                                                    <option value="">-------------</option>
                                                    <option>Primaria</option>
                                                    <option>Bachillerato</option>
                                                    <option>Universitario</option>
                                                </select>
                                            </p>
                                            <p>
                                                <label id="texto" for="studyMom">Ultimo Nivel de formaci&oacute;n de la madre</label>
                                                <select id="studymom" class="required" name="studymom" >
                                                    <option value="">-------------</option>
                                                    <option>Primaria</option>
                                                    <option>Bachillerato</option>
                                                    <option>Universitario</option>
                                                </select>
                                            </p>
                                            <p>
                                                <label id="texto" for="salaryF">Ingreso Familiar</label>
                                                <input id="salaryF" class="required digits" name="salaryF" type="text" AUTOCOMPLETE="OFF" />
                                            </p>
                                        </fieldset>
                                        <fieldset class="step">
                                            <legend>Informaci&oacute;n Laboral</legend>
                                            <p style="margin-top:130px">
                                                <label id="texto" for="work">Trabaja Actualmente</label>
                                                <font face='Comic Sans MS,arial,verdana' size='2'>No</font>
                                                <input type="radio" checked name="work" value="No" onclick="deshabilitado()">&nbsp;&nbsp;
                                                    <font face='Comic Sans MS,arial,verdana' size='2'>Si</font>
                                                    <input type="radio" name="work" value="Si" onclick="habilitado()"></br>
                                                        </p>
                                                        <p>
                                                            <label id="texto" for="areawork">&Aacute;rea de Trabajo</label>
                                                            <input  id="areawork" name="areawork" value="No" type="text" disabled dAUTOCOMPLETE="OFF" />
                                                        </p>


                                                        </fieldset>
                                                        <fieldset class="step">
                                                            <legend>Confirmar Ingreso </legend>


                                                            <p id="grande" style="margin-top:100px">Advertecia
                                                            
                                                            </p>  
                                                        
                                                            <p id="grande2">
                                                                
                                                                El formulario es llenado correctamente si todos botones 
                                                                tiene una marca de verificación verde.
                                                                </br>
                                                                Si los botones tienen una marca de verificación 
                                                                roja indica que algún campo se encuentra vacio
                                                                o rellenado con datos no válidos. 

                                                            </p>
                                                            <p class="submit">
                                                             <button id="registerButton" type="submit">Registrar</button>
                                                            </p>
                                                            <p class="submit">
                                                            <a href="Module_Administrator.jsp" style="text-decoration: none"><button >Regresar</button></a>
                                                            </p>
                                                        </fieldset>
                                                        </form>
                                                        </div>
                                                        <div id="navigation" style="display:none;">
                                                            <ul>
                                                                <li class="selected">
                                                                    <a href="#">Cuenta</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Usuario</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Academicos</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Familiares</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Laboral</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Confirmaci&oacute;n</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        </div>
                                                        </div>
                                                        </body>
                                                        </html>